<template>
  <el-config-provider :locale="elLocale">
    <router-view />
  </el-config-provider>

    <!-- <div class="header">
        <div class="header-left">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="header-right">
          <el-button @click="translate('zh')">中文</el-button>
          <el-button @click="translate('en')">English</el-button>
          <el-dropdown>
            <el-avatar
              size="small"
              src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
            />
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>个人信息</el-dropdown-item>
                <el-dropdown-item>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <el-card>
            <template #header>
              <div class="card-header">
                <span>数据展示</span>
                <el-button @click="getApiData">刷新数据</el-button>
              </div>
            </template>
            <div>{{ $t('test.test') }}</div>
            <div>{{ $t('login.login') }}</div>
          </el-card> --> 
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import zh from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
import i18n from '@/locales/i18n'
import { useCounterStore } from '@/stores'

const elLocale = computed(() => {
  return i18n.global.locale.value === 'en' ? en : zh
})


// 切换语言的函数
function translate(lang: string) {
  localStorage.setItem('language', lang)
  i18n.global.locale.value = lang as 'zh-cn' | 'en'
}


// 测试pinia是否成功
// const piniaStore = useCounterStore()
// console.log(piniaStore.count)


// 测试api接口跨域是否成功
// const getApiData = () => {
//   test({}).then((res) => {
//     console.log(res)
//   })
// }
</script>

<style>
@import 'nprogress/nprogress.css';
@import './assets/styles/nprogress.css'; /* 自定义样式覆盖默认样式 */
</style>
